<template>
  <div>
    <div :class="{'is-mobile':isMobile}" class="stockin-title">
      <div class="title"><SectionTitle title="入库记录" /> </div>
      <div v-if="hasRouteAuth('mengli:inventoryLog:read')" class="title-tip">
        入库记录数据来源萌力库存-入库记录，如需补录请去
        <span style="color: #406eff; cursor: pointer" @click.prevent="goStockInLogPage()">萌力库存-入库记录</span>
        操作。
      </div>
    </div>
    <div :class="{'is-mobile': isMobile}" class="data-container">
      <div class="data-item">
        <img :src="stockOutIcon1" alt="">
        <div class="label">入库单数量：</div>
        <div class="num">{{ stockInLog.totalStockInQuantity | filterNon }}</div>
        <div v-if="hasRouteAuth('mengli:inventoryLog:read')" class="action" @click="goStockInLogPage(true)">查看 ></div>
      </div>
      <div class="data-item">
        <img :src="stockOutIcon2" alt="">
        <div class="label">待盘点库存：</div>
        <div class="num">{{ stockInLog.stockPendingQuantity | filterNon }}</div>
        <div v-if="hasRouteAuth('mengli:inventoryLog:read')" class="action" @click="goStockInLogPage(true, true)">查看 ></div>
      </div>
    </div>
  </div>
</template>

<script>
import SectionTitle from '@/components/Title';
import stockOutIcon1 from '@/assets/mengli/inventory/stock_out_icon1.png';
import stockOutIcon2 from '@/assets/mengli/inventory/stock_out_icon2.png';
import { getStockInLog } from '@/api/mengli';
import { filterNon } from '@/filters';
import { hasRouteAuth } from '@/utils/permission';

export default {
  filters: {
    filterNon
  },
  components: {
    SectionTitle
  },
  props: {
    detailData: {
      type: Object,
      default: () => ({})
    },
    isMobile: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      stockOutIcon1,
      stockOutIcon2,
      stockInLog: {}
    };
  },
  created() {
    this.queryStockInLog();
  },
  methods: {
    hasRouteAuth,
    queryStockInLog() {
      const id = Number(this.$route.params.id) || '';
      getStockInLog(id).then(res => {
        this.stockInLog = res.data;
      });
    },
    goStockInLogPage(onlyShowCurrent = false, onlyShowPending = false) {
      const query = {};
      if (onlyShowCurrent) { // 筛选入库记录页面所对应的SKU+对应仓库的所有入库记录
        query.code = this.detailData.code;
        query.repositoryId = this.detailData.repository && this.detailData.repository.repositoryId;
      }
      if (onlyShowPending) { // 需要处理的退货单
        query.isPending = true;
      }
      const url = this.$router.resolve({
        name: 'mengliInventoryLog',
        query
      });
      window.open(url.href, '_blank');
    }
  }
};
</script>

<style scoped lang="scss">

.data-container {
  background: #fafafc;
  border-radius: 4px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  .data-item {
    display: flex;
    align-items: center;
    margin-right: 20px;
    min-width: 23%;
    border-right: 1px solid #DDE1EA;
    &:last-child {
      margin-right:0px;
      border-right: none
    }
    img {
      width: 16px;
      margin-right: 5px;
    }
    .label {
      font-size: 14px;
      line-height: 14px;
      color: #999;
      white-space: nowrap;
    }
    .num {
      font-size: 16px;
      font-family: DIN Alternate, DIN Alternate-Bold;
      font-weight: 700;
      white-space: nowrap;
      color: #5f77c3;
    }
    .action {
      margin-left: 12px;
      color: #406eff;
      white-space: nowrap;
      cursor: pointer;
    }
  }
  &.is-mobile {
    flex-wrap: nowrap !important;
    .data-item {
      width: 50%;
      padding-right: 10px;
      margin-right: 10px;
      min-width: fit-content;
    }
    @include scrollBar($x: auto, $y: auto);
  }
}
.stockin-title {
  display: flex;
  align-items: center;
  margin: 0 0 16px 0;
  &.is-mobile {
    display: block;
    .title-tip {
      margin-top: 10px;
    }
  }
  .title {
    margin-right: 10px;
  }
  .title-tip {
    font-size: 14px;
    color: #999;
  }
}
</style>
